$(function() {
    function initForm() {
        let id = local.href.split('=')[1];
        axios({
            url: '/my/article/' + id,
            method: 'get',
        }).then(res => {
            console.log(res)
            if (res.data.status != 0) {
                return layer.msg(res.data.message);
            }
            // 成功过后渲染-form表单赋值
            form.val('formEdit', res.data.data);
            // 把文章信息,赋值给form表单;
            // 文章内容和文章封面都是插件,赋值需要特殊处理;
            setTimeout(function() {
                tinyMCE.activeEditor.setContent(res.data.data.content);
            }, 1000);
            // 修改文章封面
            // 3.先销毁旧的裁剪区域,再重新设置裁剪图片路径,之后再创建新的裁剪区域:
            let baseURL = 'http://api-breakingnews-web.itheima.net';
            let url = baseURL + res.data.data.cover_img;
            if (res.data.data.cover_img) {
                $image.cropper('destory')
                    // 销毁旧的裁剪区域
                    .attr('src', url)
                    // 重新设置图片路径
                    .cropper(options)
                    // 重新初始化裁剪区域
            }
        });
    }
    // 需求1:初始化渲染文章分类列表;
    // 后面要用,所以封装成函数!
    // 定义layui导出的变量
    let layer = layui.layer;
    let form = layui.form;
    initArtCateList();
    // 封装初始化文化文章分类列表渲染指数
    function initArtCateList() {
        // 发送ajax
        axios({
            url: '/my/article/cates',
            method: 'get',
        }).then(res => {
            // console.log(res)
            if (res.data.status != 0) {
                return layer.msg(res.data.messagge);
            }
            // 定义数组,直接渲染
            let arr = ['<option value=">请选择文章类别</option>'];
            res.data.data.forEach(ele => {
                if (ele.Id > 0) {
                    arr.push(`<option value="${ele.Id}">${ele.name}</option>`);
                }
            });
            // 赋值
            let str = arr.join('');
            $("[name=cate_id]").empty().html(str);
            //重复渲染页面中的所有form中的所有表单
            form.render();
            // 文章分类渲染完毕,才能渲染form标签;(因为文章信息中包含文章分类)
            initForm();
        });
    }
    // 需求2:初始化富文本编辑器
    initEditor();
    // 需求3:初始化图片裁剪器
    // 3.1获取图片
    var $image = $('#image')
        // 3.2裁剪选项
    var options = {
            aspectRatio: 400 / 280,
            preview: '.img_preview'
        }
        // 3.3初始化裁剪区域
    $image.cropper(options);

    // 需求4:点击按钮天啊家文章状态;
    let state;
    $("#btn1").on('click', function() {
        state = '已发布';
    })
    $("#btn2").on('click', function() {
            state = '草稿';
        })
        // 需求5:点击按钮钻则图片
    $("#chooseImageBtn").on('click', function() {
        $("#chooseImageInp").click();
    })
    $("#chooseImageInp").on('change', function(e) {
            // e.preventDefault();
            // 1.拿到用户选择的文件
            var file = e.target.files[0]
                // 非空校验
            if (!file) {
                return;
            }
            // 2.根据选择的文件，创建一个对应的URL地址：
            var newImageURL = URL.createObjectURL(file)
                // 3.先销毁旧的裁剪区域,再重新设置图片路径,之后再创建新的裁剪区域:
            $image.cropper('destory') // 销毁旧的裁剪区域
                .attr('scr', newImgURL) // 重新设置图片 
                .cropper(options) //重新初始化裁剪区域
        })
        // 需求6:文章修改
    $("#formEdit").on('submit', function(e) {
        // 阻止表单默认提交
        e.preventDefault();
        // 创建FormData类型数据
        let fd = new FormData(this);
        // 把文章状态添加到FormData对象中;
        // 前面的带引号,做属性;后面的不带引号,用变量值!
        fd.append('state', state);
        //生成图片
        //创建一个Canvas画布
        $image.cropper('getCroppedCanvas', {
            width: 400,
            height: 280
        }).toBlod(function(blob) {
            // 将画布上的内容,转化为文件对象
            得到文件对象后,
            进行后续对的操作 - 生成文件是异步操作;
            axios({
                url: '/my/article/edit',
                method: 'post',
                data: fd,
            }).then((res) => {
                if (res.data.status != 0) {
                    return layer.msg(res.data.message);
                }
                // 提示
                layer.msg('恭喜您,修改文章成功!');
                // 跳转到文章列表页
                // location.href='/article/art_list.html';
                setTimeout(function() {
                    window.parent.document.getElementById('art_list').click();
                }, 1500);
            })
        });
    })
});